<!-- Author:Rain -->

<template>
    <div class="resume-section-content">
        <div class="resume-edit" id="">
            <div class="resume-edit-content">
                <div class="basic-info-edit">
                    <div class="edit-form-content">
                        <form class="ant-form ant-form-vertical">
                            <RainSelect @sendSelect='' title="学历" :value="2" :options="['博士', '硕士','本科','大专','中专/中技','高中','初中以下']" />
                            <RainInput  @sendInput="val=>educationInfo.school=val" :value="educationInfo.school" title="学校名称" placeholder="请填写" />
                            <RainTime @sendTime="val => educationInfo.undergo.start = YearMonthToString(val)" title="在职时间-开始" :value="YearMonthToJSON(educationInfo.undergo.start)" />
                            <RainTime @sendTime="val => educationInfo.undergo.end = YearMonthToString(val)" title="在职时间-至" :value="YearMonthToJSON(educationInfo.undergo.end)" />
                            <RainSelect title="教育类型" :value="1" :options="['全日制','非全日制']" />
                            <RainInput @sendInput="val=>educationInfo.major=val" :value="educationInfo.major" title="专业名称" placeholder="请填写" />
                            <RainText @sendText="val=>educationInfo.experience=val" :value="educationInfo.experience" title="在校经历" placeholder="在校荣誉、担任职务、主修课程、经历" />
                        </form>
                    </div>
                </div>
                <div class="resume-edit-btn">
                    <button type="button" @click="cancel" class="ant-btn ant-btn-lg btn-cancel"><span>取消</span></button>
                    <button type="button" @click="submit" class="ant-btn ant-btn-primary ant-btn-lg btn-submit"><span>确定</span></button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { RainInput, RainTime,RainText,RainSelect } from "@/components/formitems/index"
import { updateEducationInfo } from "@/api/user/index"
const emit=defineEmits(["closeEdit","submitEdit"])
import { YearMonthToJSON,YearMonthToString } from "@/utils/todo"
const props=defineProps(['educationInfo','refreshInfo'])
const { educationInfo } = toRefs(props)//这样做的话就能变成响应式的了

//当下面的确认按钮或者点击按钮点击后，进行判断！！
function cancel() {
    //这个是直接关闭！！！
    emit("closeEdit")
}

function submit(){
    //提交获取到的数据，并且进行关闭
    let EducationInfo={
        background:educationInfo?.value.background,
        experience:educationInfo?.value.experience,
        major:educationInfo?.value.major,
        school:educationInfo?.value.school,
        type:educationInfo?.value.type,
        undergo:{
            start:educationInfo?.value.undergo.start,
            end:educationInfo?.value.undergo.end
        }
    }

    updateEducationInfo(EducationInfo).then(val=>{
        console.log(val);
        ElMessage({
            message: "数据更新成功~",
            type: 'success',
        })
        //获取更新数据
        props.refreshInfo()

        emit("submitEdit")
    }).catch(err=>{
        console.log(err);
        ElMessage({
            message: "数据更新失败！",
            type: 'error',
        })
    })
}
</script>

<style scoped>
.resume-edit {
    width: 100%;
    background: #f6f8fb;
}

.resume-edit-content {
    padding: 24px 0;
}

/* 基本信息编辑 */
.basic-info-edit {
    padding: 0 36px;
    padding-bottom: 30px;
}

.basic-info-edit .ant-card-meta {
    display: inline-block;
    margin-bottom: 32px;
    margin: -4px 0;
}

.ant-card-meta::after,
.ant-card-meta::before {
    display: table;
    content: "";
}

.ant-card-meta:after {
    clear: both;
}

.ant-card-meta-avatar {
    float: left;
    padding-right: 16px;
}

.avatar-container {
    display: inline-block;
    position: relative;
}

.ant-avatar {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #000;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    background: #ccc;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
}

.ant-avatar-image {
    background: transparent;
}

.ant-avatar>img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.ant-card-meta-detail {
    overflow: hidden;
}

.basic-info-box .ant-card-meta-title {
    font-size: 20px;
    font-weight: 700;
}

.ant-card-meta-title {
    overflow: hidden;
    color: #07132b;
    font-weight: 500;
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.basic-info-edit .ant-card-meta .ant-card-meta-title {
    color: #ff6400;
    font-weight: 400;
}

.ant-card-meta-detail>div:not(:last-child) {
    margin-bottom: 8px;
}

.basic-info-edit .ant-card-meta .ant-card-meta-description {
    font-size: 13px;
    font-weight: 400;
    color: #8b98a9;
}

/* 表单 */
.ant-form {
    box-sizing: border-box;
    margin: 0;
    padding: 0px;
    color: #000;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px 20px;
    /* 原来flex布局中也可以用gap */
}

/* 简历按钮样式 */
.resume-edit-btn {
    text-align: right;
    padding: 0 56px;
}

.resume-edit-btn .btn-cancel,
.resume-edit-btn .btn-submit {
    width: 100px;
    height: 40px;
    border-radius: 4px;
    font-size: 14px;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

.resume-edit-btn .btn-submit {
    color: #fff;
    background-color: #ff6400;
    border: 1px solid;
}

.resume-edit-btn .btn-cancel {
    margin-right: 16px;
    border: 1px solid #ff6400;
    color: #ff6400;
}
</style>